import React from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar, Divider, Button } from 'antd-mobile';
import '../../css/yjh/Apps.css'
import { useLocation } from 'react-router-dom';
export default function ConfirmPage() {

    const location = useLocation()
    const { totalprice } = location.state

    const navgiter = useNavigate()
    const back = () => {
        navgiter('/tar/shou')
    }
    const pays = () => {
        navgiter('/pay')
    }

    const payss = JSON.parse(localStorage.getItem('selectedPay'));
    const paysss = JSON.parse(localStorage.getItem('selectedCoupon'));


    const serviceDetails = {
        serviceContent: '房屋清洁',
        serviceType: '清洁服务',
        servicePerson: '王小小',
        serviceTime: '2024年12月23日|11:00AM',
        workingHours: '2 小时',
    };

    return (
        <div>
            <NavBar back='订单详情' onBack={back} />

            <div className='imgs'>
                <img src="https://www.laivz.com/wp-content/uploads/2022/05/upc-a-1-768x514.png" alt="" />
            </div>

            <div className='contextss'>
                <div><p className='p21'>服务内容</p><p className='p41'>{serviceDetails.serviceContent}</p></div>
                <div><p className='p21'>服务类型</p><p className='p41'>{serviceDetails.serviceType}</p></div>
                <div><p className='p21'>服务人员</p><p className='p41'>{serviceDetails.servicePerson}</p></div>
                <div><p className='p21'>服务时间</p><p className='p41'>{serviceDetails.serviceTime}</p></div>
                <div><p className='p21'>工作时间</p><p className='p41'>{serviceDetails.workingHours}</p></div>
            </div>

            <Divider />

            <div className='ccontexts'>
                <p className='p21'>房屋清洁详情</p>
            </div>

            <Divider />

            <div className='selectsss'>
                <div><p className='p21'>实付金额</p><p className='p41' > {totalprice * paysss.price} </p></div>
                <div><p className='p31'>优惠</p><p className='p31'>-{totalprice - totalprice * paysss.price}</p></div>
                <div><p className='p21'>支付方式</p><p className='p41'>{payss.name}</p></div>
                <div><p className='p21'>付款时间</p><p className='p41'>{serviceDetails.serviceTime}</p></div>
                <div><p className='p21'>订单编号</p><p className='p41'>{serviceDetails.bianhao}</p></div>
                <div><p className='p21'>状态</p><p className='p51'>待进行</p></div>
            </div>

            <Divider />


        </div>
    )
}

